import { useEffect, useRef, useState } from 'react'
import Button from 'src/components/Button'
import Block from 'src/components/Block'
import s from './index.module.scss'
import r from 'src/reset.module.scss'
import { searchApi } from './api'
import List from '../List'

const td = {
  title: '搜索案例二',
  desc: '这是一种常规搜索方案，通过在input中输入搜索关键词，然后点击搜索按钮搜索结果，并新增了初始化需求'
}

// 在常规搜索案例的基础之上，新增初始化需求
export default function DemoOneNormal() {
  const str = useRef('')
  const [list, setList] = useState<string[]>([])
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(true)

  function getList() {
    searchApi(str.current).then(res => {
      setList(res)
      setLoading(false)
      setError('')
    }).catch(err => {
      setLoading(false)
      setError(err)
    })
  }

  useEffect(() => {
    loading && getList()
  }, [loading])

  function onSure() {
    setLoading(true)
  }

  return (
    <Block className={s.container} title={td.title} desc={td.desc}>
      <div className={r.flex}>
        <input
          className={s.input}
          placeholder="请输入您要搜索的内容"
          onChange={(e) => str.current = e.target.value}
        />
        <Button
          className={s.button}
          onClick={onSure}
        >
          搜索
        </Button>
      </div>
      <List
        list={list}
        loading={loading}
        error={error}
        renderItem={(item) => (
          <div key={item} className={s.item}>{item}</div>
          // <div key={item} className={s.item}>{`${str.current} + ${item}`}</div>
        )}
      />
    </Block>
  )
}

// 防抖、去重